<template>
  <div v-if="!this.$store.state.user.userIsPhone" class="head-main-box">
    <div class="head-title">
      <div class="log-box">
        <img src="../assets//zkhyLogo.png" alt="" />
      </div>
      <div class="name-box">
        <span>项目管理系统</span>
      </div>
    </div>
    <div class="page-btn">
      <el-tabs v-model="activeName" type="card" v-if="!isPgone&&headImgUrl ">
        <el-tab-pane label="项目信息" name="first"></el-tab-pane>
        <!-- <el-tab-pane label="项目信息录入" name="second"></el-tab-pane> -->
        <!-- <el-tab-pane label="日报信息录入" name="third"></el-tab-pane> -->
        <el-tab-pane label="日报信息" name="fourth"></el-tab-pane>
        <el-tab-pane label="证书资质" name="fifth"></el-tab-pane>
        <el-tab-pane label="字典信息" name="sixth"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- <div class="page-btn">
      <div @click="goPage(0)">TableView</div>
      <div @click="goPage(2)">项目信息录入</div>
      <div @click="goPage(1)">日报信息录入</div>
      <div @click="goPage(3)">日报列表</div>
    </div> -->
    <div class="user-info" v-if="headImgUrl">
      <img class="user-img" :src="headImgUrl" />
      <div class="user-name">{{ name }}</div>
      <div class="log-out-box" @click="logout">
        退出登录
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    parActiveName: {
      type: String,
      default: 'first'
    }
  },
  watch: {
    activeName (nv, ov) {
      switch (nv) {
      case 'first':
        if (this.$route.fullPath === '/tablePage') return
        this.$router.push('/tablePage')
        break
      case 'second':
        if (this.$route.fullPath === '/proAdd') return
        this.$router.push('/proAdd')
        break
      case 'third':
        if (this.$route.fullPath === '/info') return
        this.$router.push('/info')
        break
      case 'fourth':
        if (this.$route.fullPath === '/DailyList') return
        this.$router.push('/DailyList')
        break
      case 'fifth':
        if (this.$route.fullPath === '/FilesList') return
        this.$router.push('/FilesList')
        break
      case 'sixth':
        if (this.$route.fullPath === '/DictionaryManage') return
        this.$router.push('/DictionaryManage')
        break
      }
    }
  },
  data () {
    return {
      activeName: this.parActiveName,
      headImgUrl: this.$store.state.user.userHeadImgUrl
        ? this.$store.state.user.userHeadImgUrl
        : this.$store.state.user.dingUserInfo.avatar,
      userName: this.$store.state.user.userName,
      dingName: this.$store.state.user.dingName,
      dingUserId: this.$store.state.user.dingUserId,
      name: this.$store.state.user.userName
        ? this.$store.state.user.userName
        : this.$store.state.user.dingName,
      isPgone: this.$store.state.user.userIsPhone
    }
  },
  mounted () {
    console.log(
      'headUrl--------->',
      this.$store.state.user.dingUserInfo.avatar
    )
  },
  methods: {
    goBack () {
      console.log('go back')
    },

    // 跳转页面
    goPage (num) {
      switch (num) {
      case 0:
        if (this.$route.fullPath === '/tablePage') return
        this.$router.push('/tablePage')
        break
      case 1:
        if (this.$route.fullPath === '/info') return
        this.$router.push('/info')
        break
      case 2:
        if (this.$route.fullPath === '/proAdd') return
        this.$router.push('/proAdd')
        break
      case 3:
        if (this.$route.fullPath === '/DailyList') return
        this.$router.push('/DailyList')
        break
      case 4:
        if (this.$route.fullPath === '/FilesList') return
        this.$router.push('/FilesList')
        break
      }
    },

    // 跳转到Table页面
    toTableView () {
      this.$router.push('/tablePage')
    },

    // 退出登录
    logout () {
      this.$confirm('此操作将退出登录, 是否继续?', '注销提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.replace('/')
        this.$store.commit('user/logOut')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.head-main-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 45px;
  padding: 20px 0;
  overflow: hidden;
  border-bottom: 1px solid #f0f0f0;
  .head-title {
    display: flex;
    width: 30%;

    /* border: 1px solid red; */
    .log-box {
    width: 100px;
    height: 40px;

    /* border: 1px solid blue; */
    > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .name-box {
    width: 50%;
    height: 40px;
    color: black;
    font-size: 28px;
    line-height: 46px;

    /* border: 1px solid blue; */
  }
  }
  .page-btn {
    display: flex;
    width: 40%;
    height: 40px;
    line-height: 40px;

    /* border: 1px solid blue; */
    
    /* > div {
      border: 1px solid #dad2d2;
      margin: 0 5px;
      width: 90px;
      line-height: 20px;
      height: 20px;
      font-size: 12px;
      text-align: center;
    }

    > div:hover {
      cursor: pointer;
    } */
  }
  .user-info {
    display: flex;
    width: 20%;
    height: 40px;

    /* border: 1px solid blue; */
    .user-img {
      width: 40px;
      height: 40px;

      /* border: 1px solid green; */
      border-radius: 40px;
    }
    .user-name {
      width: 80px;
      height: 40px;
      margin-left: 10px;
      line-height: 40px;

      /* border: 1px solid green; */
    }
    .log-out-box {
      display: flex;
      align-items: center;
      width: 80px;
      height: 40px;
      color: #e61414;
      font-size: 14px;
      &:hover {
        cursor: pointer;
      }
      &:active {
        color: #e6141486;
      }
    }
  }
}

@media screen and (width <= 768px) {
  .main-box {
    display: flex;
    width: 100%;
    height: 45px;
    padding: 20px 0;
    overflow: hidden;
    border-bottom: 1px solid #f0f0f0;
    .log-box {
      width: 100px;
      height: 40px;

      /* border: 1px solid blue; */
      margin: 0 30px;
      > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .name-box {
      width: 45%;
      height: 40px;
      color: black;
      font-size: 22px;

      /* border: 1px solid blue; */
      line-height: 45px;
    }
    .page-btn {
      display: flex;
      width: 100%;

      /* border: 1px solid blue; */
      height: 40px;
      margin-top: 10px;
      margin-left: 12px;
      line-height: 40px;
      > div {
        width: 20%;
        height: 20px;
        margin: 0 5px;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        border: 1px solid #dad2d2;
      }
      > div:hover {
        cursor: pointer;
      }
    }
    .user-info {
      display: flex;
      width: 120px;
      height: 40px;
      .user-img {
        width: 40px;
        height: 40px;
        border-radius: 40px;
      }
      .user-name {
        width: 80px;
        height: 40px;
        margin-left: 10px;
        line-height: 40px;
      }
    }
  }
}
</style>
<style lang="scss">
.user-info {
  /* border: 1px solid blue; */
  display: flex;
  width: 120px;
  height: 40px;
  .user-img {
    width: 40px;
    height: 40px;

    /* border: 1px solid green; */
    border-radius: 40px;
  }
  .user-name {
    width: 60px !important;
    height: 40px;
    margin-left: 1px !important;
    line-height: 40px;
    text-align: start;

    /* border: 1px solid green; */
  }
}
.log-box {
  width: 100px;
  height: 40px;

  /* border: 1px solid blue; */
  margin: 0 30px;
  > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.name-box {
  width: 45%;
  height: 40px;
  color: black;
  font-size: 22px;
  line-height: 45px;

  /* border: 1px solid blue; */
  text-align: start;
}
.el-tabs__nav-scroll {
      margin-left: 0 !important;
    }
</style>
